<template>
  <div>
    <div class="body">
      <div class="searchBox">
        <div class="searchKey">
          <span>{{ value }}</span>
        </div>
        <div class="tools">
          <div class="search" v-items="{ default: true }" @click="searchRes">
            <span class="iconfont icon-sousuo">搜索</span>
          </div>
          <div class="out" v-items ref="delete" @click="delSearchValue()">
            <span class="iconfont icon-lajitong">删除</span>
          </div>
        </div>
        <div class="keyboard">
          <span
            v-for="(item, index) in key"
            :key="index"
            v-items
            @click="setSearchValue(item)"
            >{{ item }}</span
          >
        </div>
      </div>
      <div class="searchRes" id="songItemBox">
        <div
          class="songItem"
          v-for="(item, index) in searchData"
          :key="index"
          v-proportion="1.5"
        >
          <img
            :src="item.cover"
            v-proportion="1.4"
            v-items
            :id="'songItem' + index"
            :ref="'songItem' + index"
            @up="upMove(index)"
            @right="rightMove(index)"
            @down="downMove(index)"
            @left="leftMove(index)"
            @click="play(item.id)"
          />
          <span class="textline">{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
var VueScrollTo = require("vue-scrollto");
export default {
  data() {
    return {
      value: "",
      searchData: false,
      key: [
        "A",
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "I",
        "J",
        "K",
        "L",
        "M",
        "N",
        "O",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "U",
        "V",
        "W",
        "X",
        "Y",
        "Z"
      ]
    };
  },
  created() {
    // window.android.setMoiveStatus("3");
  },
  methods: {
    setSearchValue(key) {
      this.value = this.value + key;
    },
    delSearchValue() {
      let value = this.value;
      this.value = value.substring(0, value.length - 1);
    },
    searchRes() {
      this.$api.searchRes(this);
    },
    scoll(index) {
      let element = "#songItem" + index;
      let duration = 100;
      var options = {
        container: "#songItemBox",
        easing: "linear",
        offset: -100,
        force: true,
        cancelable: true,
        x: false,
        y: true
      };
      VueScrollTo.scrollTo(element, duration, options);
    },
    upMove(index) {
      if (index <= 2) {
        console.log("MKHeader");
        this.$refs.MKHeader.inHeaderVitems();
      } else {
        this.$service.move(this.$refs["songItem" + (index - 3)][0]);
        this.scoll(index - 3);
      }
    },
    rightMove(index) {
      let searchDataIndex = this.searchData.length - 1;
      if ((index + 1) % 3 == 0 || index == searchDataIndex) {
        return false;
      } else {
        this.$service.move(this.$refs["songItem" + (index + 1)][0]);
        this.scoll(index + 1);
      }
    },
    downMove(index) {
      let searchDataIndex = this.searchData.length - 1;
      if (index > searchDataIndex - 3) {
        return false;
      } else {
        this.$service.move(this.$refs["songItem" + (index + 3)][0]);
        this.scoll(index + 3);
      }
    },
    leftMove(index) {
      if ((index + 4) % 3 == 1 || index == 0) {
        this.$service.move(this.$refs.delete);
      } else {
        this.$service.move(this.$refs["songItem" + (index - 1)][0]);
        this.scoll(index - 1);
      }
    },
    play(id) {
      this.$router.push({
        path: "/detail/" + id
      });
    }
  }
};
</script>

<style lang="less" scoped>
.body {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: row;
  background: #25272d;
  //background-color: #444851;
  //background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23000000' fill-opacity='0.51' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
.searchBox {
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.searchRes {
  width: 50%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.songItem {
  width: 33%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
}
.songItem > img {
  width: 70%;
  border-radius: 10px;
  margin-top: 10px;
  padding: 4px;
}
.songItem > span {
  margin-top: 10px;
}
.searchKey {
  padding: 4px 10px;
  font-size: 20px;
  width: 60%;
  height: 50px;
  border-bottom: 1px solid rgba(230, 0, 0, 1);
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  color: #fff;
}
.tools {
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
.search {
  background: rgba(230, 0, 0, 1);
}
.out {
  background: #223c61;
}
.search,
.out {
  width: 40%;
  height: 40px;
  margin: 10px 10px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4px;
}
.search > span,
.out > span {
  font-size: 20px !important;
}

.keyboard {
  width: 80%;
  height: 60%;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
}
.keyboard > span {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #223c61;
  border-radius: 4px;
  margin: 6px;
  padding: 4px;
}
</style>
